<template>
  <div class="arousalUser hideScrollBar" ref="scrollEl">
    <!-- 内容部分 -->
    <div class="content">
      <ClientOnly>
        <!-- 导航 -->
        <NavBar
          isFixed
          :title="t('arousalUser.hl7')"
          :isTransparent="pageData.whiteTheme"
          :whiteTheme="pageData.whiteTheme"
          :navScorllOffset="60"
          navScorllColor="#FFF"
          :scrollEl="scrollEl"
          @getNavBarHeight="(h) => (pageData.navBarHeight = h)"
          @thresholdChange="(val) => (pageData.whiteTheme = !val)"
        >
        </NavBar>
        <van-pull-refresh
          class="pull-refresh"
          v-model="pageData.loading"
          :pulling-text="t('mvp.other.text9')"
          :loosing-text="t('mvp.other.text10')"
          loading-text=" "
          @refresh="onRefresh"
        >
          <!-- 内容背景 -->
          <div style="position: relative">
            <img
              class="content-bg-left"
              src="/image/arousalUser/content-bg-left.png"
            />
            <img
              class="content-bg-right"
              src="/image/arousalUser/content-bg-right.png"
            />
          </div>
          <!-- 说明页面跳转 -->
          <div class="description items-center">
            <div class="description-right" @click="jumpPage('arousalDesc')">
              <img
                class="description-right-img"
                src="/image/pledge/pledge-desc-icon.svg"
              />
            </div>
          </div>
          <!-- 狂送 1 个亿 BDC -->
          <div class="ks1gy">
            <div class="ks1gy-text">{{ $t("arousalUser.ksbdc") }}</div>
            <div class="ks1gy-value">{{ `${toThousands(100000000)} BDC` }}</div>
          </div>
          <!-- 倒计时 -->
          <div class="countdown items-center">
            <!-- 剩余天数 -->
            <div class="countdown-syts">{{ t("arousalUser.syts") }}</div>
            <!-- 几天 -->
            <div class="countdown-icon">{{ pageData.days }}</div>
            <!-- 天 -->
            <div class="countdown-unit">{{ t("arousalUser.day") }}</div>
            <!-- 几小时 -->
            <div class="countdown-icon">{{ pageData.hour }}</div>
            <!-- 小时 -->
            <div class="countdown-unit">{{ t("arousalUser.hour") }}</div>
            <!-- 几分钟 -->
            <div class="countdown-icon">{{ pageData.minutes }}</div>
            <!-- 分钟 -->
            <div class="countdown-unit">
              {{ t("arousalUser.minutes") }}
            </div>
          </div>
          <!-- 签到 -->
          <div class="sign">
            <!-- 7 天签到 -->
            <div class="sign-content">
              <!-- 头部描述 -->
              <div class="sign-content-header items-center">
                <div class="sign-content-header-text">
                  {{ t("arousalUser.lxqd7t") }}
                </div>
              </div>
              <!-- 7天排列 -->
              <div
                class="sign-content-day7 items-center"
                v-if="dayList.length > 0"
              >
                <template v-for="(item, index) in dayList">
                  <div
                    v-if="index < 6"
                    :key="item.day"
                    class="sign-content-day7-item items-center"
                    :class="{
                      'sign-content-activate': item.type === 2,
                      'sign-content-disabled': item.type === 3,
                    }"
                  >
                    <!-- 第几天 -->
                    <div
                      class="sign-content-day7-item-title"
                      :class="{
                        'sign-content-day7-item-title-activate':
                          item.type === 2,
                        'sign-content-day7-item-title-disabled':
                          item.type === 3,
                      }"
                    >
                      <img
                        class="sign-content-day7-item-top"
                        :src="item.titlebg"
                      />
                      <div style="position: relative">
                        {{ t("arousalUser.day") }}{{ item.day }}
                      </div>
                    </div>
                    <!-- icon -->
                    <img class="sign-content-day7-item-icon" :src="item.icon" />
                    <!-- BDC -->
                    <div
                      class="sign-content-day7-item-footertext"
                      :class="{
                        'sign-content-day7-item-footertext-activate':
                          item.type === 2,
                        'sign-content-day7-item-footertext-disabled':
                          item.type === 3,
                      }"
                    >
                      <img
                        class="sign-content-day7-item-footer"
                        :src="item.footerbg"
                      />
                      <div style="position: relative">{{ item.bdc }}BDC</div>
                    </div>
                  </div>
                </template>
                <!-- 第 7 天 -->
                <div
                  class="sign-content-day7-end items-center"
                  :class="{
                    'sign-content-activate': dayList[6].type === 2,
                    'sign-content-disabled': dayList[6].type === 3,
                  }"
                >
                  <!-- 第几天 -->
                  <div
                    class="sign-content-day7-end-title"
                    :class="{
                      'sign-content-day7-end-title-activate':
                        dayList[6].type === 2,
                      'sign-content-day7-end-title-disabled':
                        dayList[6].type === 3,
                    }"
                  >
                    <img
                      class="sign-content-day7-end-top"
                      :src="dayList[6].titlebg"
                    />
                    <div style="position: relative">
                      Day{{ dayList[6].day }}
                    </div>
                  </div>
                  <!-- icon -->
                  <img
                    v-if="dayList[6].icon.includes('/sign-in.png')"
                    class="sign-content-day7-end-iconbg"
                    :src="dayList[6].icon"
                  />
                  <div v-else class="sign-content-day7-end-iconbg">
                    <img
                      class="sign-content-day7-end-icon"
                      :src="dayList[6].icon"
                    />
                  </div>

                  <!-- BDC -->
                  <div
                    class="sign-content-day7-end-footertext"
                    :class="{
                      'sign-content-day7-end-footertext-activate':
                        dayList[6].type === 2,
                      'sign-content-day7-end-footertext-disabled':
                        dayList[6].type === 3,
                    }"
                  >
                    <img
                      class="sign-content-day7-end-footer"
                      :src="dayList[6].footerbg"
                    />
                    <div style="position: relative">
                      {{ dayList[6].bdc }}BDC
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 任务列表 -->
          <div class="task">
            <!-- 头部描述 -->
            <div class="task-header items-center">
              <div class="task-header-text">{{ t("arousalUser.lyhzxjl") }}</div>
            </div>
            <!-- tab -->
            <van-tabs
              v-if="signData && signData.currentSigninInfo"
              v-model:active="task.active"
              :line-width="0"
            >
              <van-tab
                v-for="(tab, index) in tabs7"
                :key="tab.title"
                :id="`van-tab-${tab.title}`"
                :disabled="index >= signData.currentSigninInfo.activeDay"
              >
                <!-- tab 菜单 -->
                <template #title>
                  <div
                    class="task-tab items-center"
                    :class="{ 'task-tab-activity': index === task.active }"
                  >
                    <div style="position: relative">
                      {{ t("arousalUser.day") }} {{ tab.title }}
                      <div class="task-tab-point" v-if="tab.isPointShow"></div>
                    </div>
                    <img
                      v-if="index >= signData.currentSigninInfo.activeDay"
                      class="task-tab-suo"
                      :src="imgUrl.tabDisabled"
                    />
                  </div>
                </template>
                <!-- 内容部分 -->
                <div class="task-content" v-if="task.list[task.active]">
                  <div v-for="(item, idx) in task.list[task.active]" :key="idx">
                    <!-- 信息部分 -->
                    <div class="task-cell items-center">
                      <div class="task-cell-left items-center">
                        <img class="task-cell-left-img" :src="item.icon" />
                        <div>
                          <div class="task-cell-left-title items-center">
                            {{ item.taskName }}
                            <div
                              v-if="item.totalCount > 1"
                              style="
                                height: 8px;
                                width: 1px;
                                background-color: #e8eaf0;
                                margin: 0 5px;
                              "
                            ></div>
                            <span
                              v-if="item.totalCount > 1"
                              class="task-cell-left-title-bdc"
                              >{{
                                item.finishCount - item.pendingClaimList.length
                              }}/{{ item.totalCount }}</span
                            >
                          </div>
                          <div class="task-cell-left-bdc items-center">
                            <img
                              class="task-cell-left-icon"
                              :src="imgUrl.tabBdc"
                            />
                            <div>{{ item.sendAmountShow }}BDC</div>
                          </div>
                        </div>
                      </div>
                      <!-- taskStatus 0:进行中 1:任务完成,待领取 2:已领取 3:已过期 -->
                      <div class="task-cell-right">
                        <div
                          class="task-cell-right-btn task-cell-right-activity"
                          v-if="item.taskStatus === 1"
                          @click="openPopup(item)"
                        >
                          {{ item.clickName }}
                        </div>
                        <div
                          class="task-cell-right-btn task-cell-right-done"
                          v-else-if="item.taskStatus === 2"
                        >
                          {{ item.clickName }}
                        </div>
                        <div
                          class="task-cell-right-btn task-cell-right-expired"
                          v-else-if="item.taskStatus === 3"
                        >
                          {{ item.clickName }}
                        </div>
                        <div
                          v-else
                          class="task-cell-right-btn"
                          @click="jumpPage(item, true, item)"
                        >
                          {{ item.clickName }}
                        </div>
                      </div>
                    </div>
                    <!-- 追加需求,要显示任务描述 -->
                    <div
                      class="task-cell-bottom"
                      :style="{
                        'border-bottom':
                          idx == task.list[task.active].length - 1
                            ? 'none'
                            : '1px solid #f4f5f7',
                        'padding-bottom':
                          idx == task.list[task.active].length - 1
                            ? '0'
                            : '15px',
                      }"
                    >
                      {{ item.taskDescription }}
                    </div>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
        </van-pull-refresh>
      </ClientOnly>
    </div>
    <!-- 奖励弹窗、签到、领取 -->
    <van-popup
      v-model:show="pageData.show"
      style="overflow: initial; background: none"
      @click-overlay="closePopup"
    >
      <div class="reward items-center">
        <!-- 标题 -->
        <div class="reward-titlebg">
          {{ reward.type === 1 ? t("arousalUser.qdcg") : t("arousalUser.gx") }}
        </div>
        <!-- 奖励-图片 -->
        <div class="reward-imgview items-center">
          <img
            class="reward-imgview-gh"
            src="/image/arousalUser/popup-img-gh.svg"
          />
          <img class="reward-imgview-img" :src="reward.img" />
        </div>

        <!-- 奖励数值 -->
        <div class="reward-bdc">+{{ reward.bdc }}BDC</div>
        <!-- 奖励描述 -->
        <div class="reward-desc">{{ t("arousalUser.tcms") }}</div>
        <!-- 跳转按钮 -->
        <div class="reward-btn items-center">
          <div class="reward-btn-text" @click="closePopup">
            {{ t("mvp.other.zdl") }}
          </div>
        </div>
        <!-- 关闭 -->
        <img
          v-if="false"
          class="reward-close"
          src="/image/arousalUser/close.svg"
          @click="closePopup"
        />
      </div>
    </van-popup>
  </div>
</template>
<script setup name="arousalUser">
import { navigateI18nTo, getOssFileUrl, toThousands } from "@/utils";
import { getReactiveActivity, claimReward } from "@/api/arousal";
import { getBoxList } from "@/api/bdc";
import { usePageVisibility } from "@vant/use";
import { useGlobalStore } from "~~/store/global";

const { t } = useI18n();
// const route = useRoute();
// console.log("页面参数:", route.query);

const globalStore = useGlobalStore();
// 如果没有登录-直接跳转登录页面
if (!globalStore.$state.token && process.client) {
  bridge.onAppLogin();
}

const imgUrl = getOssFileUrl({
  // signbg: "/image/arousalUser/signbg.png",
  tabDisabled: "/image/arousalUser/tab-disabled.svg",
  tabBdc: "/image/arousalUser/tab-bdc.svg",
});

// const { WEB_NODE_ENV = "prod" } = useRuntimeConfig().public;
const prefixImg = process.env.NODE_ENV != "development" ? "/fx" : "";
// 页面属性
const pageData = reactive({
  loading: false,
  navBarHeight: 20,
  whiteTheme: true,
  show: false,
  day: 0,
  hours: 0,
  minutes: 0,
});
// 签到数据
const signData = reactive({
  currentSigninInfo: {
    sendAmount: null,
    cycleEndTime: 0, // 激活时间
    activeDay: 1, // 当前签到的那一天
  },
  signinList: [],
});
// 任务数据
const task = reactive({
  active: 0,
  list: [],
});
// 奖励弹窗
const reward = reactive({
  type: 1, // 1：签到  2：任务奖励
  img: "",
  bdc: 0,
});

const scrollEl = ref();
// 签到背景 top 间距
// const signTop = computed(() => {
//   return pageData.navBarHeight + "px";
// });

// 组装新的 7 天数据
const day7 = [
  {
    day: 1,
    bdc: 10,
    titlebg: prefixImg + "/image/arousalUser/sign-item-top.svg",
    icon: prefixImg + "/image/arousalUser/sign-item-bdc1.png",
    footerbg: prefixImg + "/image/arousalUser/sign-item-bottom.svg",
    type: 1, // 1：未签到  2：当天  3：已签到
  },
  {
    day: 2,
    bdc: 15,
    titlebg: prefixImg + "/image/arousalUser/sign-item-top.svg",
    icon: prefixImg + "/image/arousalUser/sign-item-bdc2.png",
    footerbg: prefixImg + "/image/arousalUser/sign-item-bottom.svg",
    type: 1, // 1：未签到  2：当天  3：已签到
  },
  {
    day: 3,
    bdc: 25,
    titlebg: prefixImg + "/image/arousalUser/sign-item-top.svg",
    icon: prefixImg + "/image/arousalUser/sign-item-bdc3.png",
    footerbg: prefixImg + "/image/arousalUser/sign-item-bottom.svg",
    type: 1, // 1：未签到  2：当天  3：已签到
  },
  {
    day: 4,
    bdc: 50,
    titlebg: prefixImg + "/image/arousalUser/sign-item-top.svg",
    icon: prefixImg + "/image/arousalUser/sign-item-bdc4.png",
    footerbg: prefixImg + "/image/arousalUser/sign-item-bottom.svg",
    type: 1, // 1：未签到  2：当天  3：已签到
  },
  {
    day: 5,
    bdc: 35,
    titlebg: prefixImg + "/image/arousalUser/sign-item-top.svg",
    icon: prefixImg + "/image/arousalUser/sign-item-bdc5.png",
    footerbg: prefixImg + "/image/arousalUser/sign-item-bottom.svg",
    type: 1, // 1：未签到  2：当天  3：已签到
  },
  {
    day: 6,
    bdc: 40,
    titlebg: prefixImg + "/image/arousalUser/sign-item-top.svg",
    icon: prefixImg + "/image/arousalUser/sign-item-bdc6.png",
    footerbg: prefixImg + "/image/arousalUser/sign-item-bottom.svg",
    type: 1, // 1：未签到  2：当天  3：已签到
  },
  {
    day: 7,
    bdc: 100,
    titlebg: prefixImg + "/image/arousalUser/sign-item-top.svg",
    icon: prefixImg + "/image/arousalUser/sign-item-bdc7.png",
    footerbg: prefixImg + "/image/arousalUser/sign-item-bottom7.svg",
    type: 1, // 1：未签到  2：当天  3：已签到
  },
];
const dayList = computed(() => {
  const activeDay = signData.currentSigninInfo
    ? signData.currentSigninInfo.activeDay
    : 0;
  return day7.map((e) => {
    if (e.day < activeDay) {
      e.titlebg = prefixImg + "/image/arousalUser/sign-item-top.svg";
      e.icon = prefixImg + "/image/arousalUser/sign-item-in.svg";
      e.footerbg = prefixImg + "/image/arousalUser/sign-item-bottom.svg";
      if (e.day === 7) {
        e.footerbg = prefixImg + "/image/arousalUser/sign-item-bottom7.svg";
      }
      e.type = 3;
    } else if (e.day == activeDay) {
      e.titlebg = prefixImg + "/image/arousalUser/sign-item-top-jh.svg";
      e.icon = prefixImg + "/image/arousalUser/sign-item-in-jh.svg";
      e.footerbg = prefixImg + "/image/arousalUser/sign-item-bottom-jh.svg";
      if (e.day === 7) {
        e.footerbg =
          prefixImg + "/image/arousalUser/sign-item-bottom7-jh.svg.svg";
      }
      e.type = 2;
    } else {
      e.type = 1;
    }
    return e;
  });
});
const tabs7 = ref([
  { title: 1, isPointShow: false },
  { title: 2, isPointShow: false },
  { title: 3, isPointShow: false },
  { title: 4, isPointShow: false },
  { title: 5, isPointShow: false },
  { title: 6, isPointShow: false },
  { title: 7, isPointShow: false },
]);

//  签到弹窗展示
let alreadyShow = false;
const isShowSignView = () => {
  if (
    signData.currentSigninInfo &&
    signData.currentSigninInfo.sendAmount &&
    !alreadyShow
  ) {
    reward.type = 1;
    reward.img = `${prefixImg}/image/arousalUser/sign-item-bdc${
      signData.currentSigninInfo.activeDay < 7
        ? signData.currentSigninInfo.activeDay
        : 1000
    }.png`;
    reward.bdc = signData.currentSigninInfo.sendAmount;
    // 2.1 显示弹窗
    pageData.show = true;
    alreadyShow = true;
  }
};

// 获取任务数据
const getReactiveActivityRequest = async (isSHowDh = true) => {
  if (pageData.loading) return;
  if (isSHowDh) pageData.loading = true;
  const response = await getReactiveActivity();
  if (isSHowDh) pageData.loading = false;
  // console.log("详情数据：", response);
  if (response) {
    // 签到数据
    signData.currentSigninInfo = response.currentSigninInfo;
    signData.signinList = response.signinList;

    // bdc 数量从服务端获取
    day7.forEach((e, index) => {
      const day = response.signinList[index];
      e.bdc = day.sendAmount;
    });

    // BDC任务类型: 2:实名认证 17:手机号绑定 31:首次充值5U 26:发帖 27:点赞 28:评论 29:每日交易 30:每日活跃 32:BDC活动签到 33:BDC开箱一次 34:每日充值

    task.list = response.taskList.map((day, index) => {
      tabs7.value[index].isPointShow = false;
      if (day && day.length > 0) {
        day = day.map((e) => {
          if (e.taskType == 33) {
            e.icon = prefixImg + "/image/arousalUser/task-open-icon.svg";
          } else if (e.taskType == 34) {
            e.icon = prefixImg + "/image/arousalUser/task-cz-icon.svg";
          } else if (e.taskType == 26) {
            e.icon = prefixImg + "/image/arousalUser/task-ft-icon.svg";
          } else if (e.taskType == 27) {
            e.icon = prefixImg + "/image/arousalUser/task-dz-icon.svg";
          } else if (e.taskType == 28) {
            e.icon = prefixImg + "/image/arousalUser/task-pl-icon.svg";
          } else if (e.taskType == 29) {
            e.icon = prefixImg + "/image/arousalUser/task-jy-icon.svg";
          }
          // 是否显示红点
          if (e.pendingClaimList && e.pendingClaimList.length > 0) {
            tabs7.value[index].isPointShow = true;
          }
          return e;
        });
      }
      return day;
    });

    // 设置激活的 tab
    nextTick(() => {
      task.active = response.currentSigninInfo
        ? response.currentSigninInfo.activeDay - 1
        : 0;
    });

    // 是否展示签到弹窗
    isShowSignView();
  }
  return response || {};
};

/**
 * @description: 倒计时
 * @return {*} 定时器对象
 */
const initCountdown = () => {
  if (!ditailDate || !ditailDate.currentSigninInfo) return;
  const date1 = new Date(); // 当前时间
  const date2 = new Date(Number(ditailDate.currentSigninInfo.cycleEndTime));
  // 计算两个日期的时间戳差值（毫秒）
  let diff = date2 - date1;
  if (diff < 0) return false;
  // 时间计算
  const timeFn = () => {
    diff = date2 - new Date();
    // 将时间戳差值转换为天数
    pageData.days = Math.floor(diff / (1000 * 60 * 60 * 24));
    if (pageData.days < 0) pageData.days = 0;
    // 小时
    pageData.hour = Math.floor(
      (diff - pageData.days * 24 * 60 * 60 * 1000) / (1000 * 60 * 60)
    );

    if (pageData.hour < 0) pageData.hour = 0;
    // 分钟
    pageData.minutes = Math.floor(
      (diff -
        pageData.days * 24 * 60 * 60 * 1000 -
        pageData.hour * 60 * 60 * 1000) /
        (1000 * 60)
    );
    if (pageData.minutes < 0) pageData.minutes = 0;
    // 结束
    if (pageData.days == 0 && pageData.hour == 0 && pageData.minutes == 0) {
      clearTimeout(time);
      time = null
    }
  };
  timeFn();
  let time = setInterval(timeFn, 1000);
  return time;
};
let ditailDate = null;
let countdown = null;
onMounted(async () => {
  ditailDate = await getReactiveActivityRequest();
  // 1. 倒计时
  nextTick(() => {
    countdown = initCountdown();
  });
});
onBeforeUnmount(() => {
  if (countdown) {
    clearTimeout(countdown);
    countdown = null
  }
});

// 页面可见状态(当前页面是否进入后台) https://vant-contrib.gitee.io/vant/#/zh-CN/use-page-visibility
const pageVisibility = usePageVisibility();
watch(pageVisibility, async (value) => {
  console.log("从后台进入前台: 刷新数据 ", value);
  if (value === "visible") {
    getBoxList({ pageNum: pageData.pageNum, pageSize: 10 }).then(
      async (res) => {
        ditailDate = await getReactiveActivityRequest(false);
      }
    );
  }
});

// 下拉刷新
const onRefresh = () => {
  pageData.loading = true;
  getBoxList({ pageNum: pageData.pageNum, pageSize: 10 }).then(async (res) => {
    pageData.loading = false;
    ditailDate = await getReactiveActivityRequest();
    // 1. 倒计时
    nextTick(() => {
      countdown = initCountdown();
    });
  });
};
// 弹窗
const openPopup = async (val) => {
  console.log("--item--", val);
  if (
    val.sendAmountShow &&
    val.pendingClaimList &&
    val.pendingClaimList.length > 0
  ) {
    // 获取奖励对象
    const jl = val.pendingClaimList.pop();
    // 是否更改当前状态
    if (val.pendingClaimList.length === 0) {
      // val.finishCount += 1; 这+1 会变成 4
      if (val.finishCount >= val.totalCount) {
        val.taskStatus = 2;
      } else {
        val.taskStatus = 0;
      }
    }

    const res = await claimReward({ id: jl.activityRecordId });
    if (res) {
      // 重新请求数据,才能刷新按钮文案显示,以及小红点状态
      getReactiveActivityRequest(false);
      // 设置弹窗类型
      reward.type = 2;
      // 配置显示图片
      if (res.acquireAmount <= 5) {
        reward.img = `${prefixImg}/image/arousalUser/sign-item-bdc.png`;
      } else if (res.acquireAmount <= 50 && res.acquireAmount > 5) {
        reward.img = `${prefixImg}/image/arousalUser/sign-item-bdc4.png`;
      } else if (res.acquireAmount > 50) {
        reward.img = `${prefixImg}/image/arousalUser/sign-item-bdc1000.png`;
      }
      // 显示 bdc 数值
      reward.bdc = res.acquireAmount;
      // 显示弹窗
      pageData.show = true;
    }
  }
};
const closePopup = () => {
  pageData.show = false;
};
// 点击-页面跳转
const jumpPage = async (val, isApp = false, params) => {
  // console.log("--val--", val);
  if (isApp) {
    if (val.iosClickUrl || val.androidClickUrl) {
      // 原生桥接跳转
      if (
        val.iosClickUrl.startsWith("native://") ||
        val.androidClickUrl.startsWith("https://btcdana.com/")
      ) {
        bridge.jumpAppRoute(
          isiOS.value ? val.iosClickUrl : val.androidClickUrl
        );
      }
      // 第三方链接跳转
      else {
        let thirdUrl = isiOS.value ? val.iosClickUrl : val.androidClickUrl;
        // 如果是跳转自己的 h5 页面,则走导航跳转
        if (thirdUrl.startsWith(location.origin + "/fx/")) {
          // 方案一： 路由跳转
          jumpLocalH5PageRoute(thirdUrl);
          // 方案二： 链接加参数
          // jumpLocalH5PageUrl(thirdUrl)
        } else if (thirdUrl.includes("webview=1")) {
          navigateI18nTo({
            path: "/webview",
            query: { src: thirdUrl, title: val.name },
          });
        } else {
          await navigateTo(thirdUrl, {
            external: true,
          });
        }
      }
    }
  } else if (val === "arousalDesc") {
    await navigateI18nTo({ path: "/arousal-user/desc" });
  } else if (val === "mining") {
    await navigateI18nTo({ path: "/mvp/mining" });
  } else if (val === "assetDetails") {
    await navigateI18nTo({
      path: "/mvp/assetDetails",
    });
  }
};
</script>
<style lang="scss" scoped>
.countdown {
  z-index: 9;
  position: relative;
  margin: 0 15 * 2px;
  justify-content: center;
  height: 42 * 2px;
  margin-bottom: 12 * 2px;

  border-radius: 8 * 2px;
  border: 1px solid #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #fff 100%);
  backdrop-filter: blur(30px);
  &-syts {
    color: #002853;
    font-size: 12 * 2px;
    font-style: normal;
    font-weight: 590;
    margin-right: 6 * 2px;
    letter-spacing: -0.2px;
  }
  &-icon {
    margin-right: 6 * 2px;
    width: 23 * 2px;
    height: 22 * 2px;
    line-height: 23.5 * 2px;
    color: #fff;
    font-size: 13 * 2px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.2px;
    background-image: url("/image/arousalUser/countdown-unit-icon.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  &-unit {
    margin-right: 6 * 2px;
    color: #999da7;
    font-size: 12 * 2px;
    letter-spacing: -0.2px;
  }
}
.ks1gy {
  padding-left: 15 * 2px;
  margin-bottom: 20 * 2px;
  &-text {
    color: #002853;
    font-size: 17 * 2px;
    font-weight: 590;
    margin-top: 9 * 2px;
    margin-bottom: 7 * 2px;
  }
  &-value {
    color: #007bff;
    font-size: 28 * 2px;
    font-weight: 750;
  }
}
.description {
  position: relative;
  z-index: 9;
  justify-content: flex-end;
  margin-top: 10 * 2px;
  &-right {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    background: rgba(255, 255, 255, 0.3);
    padding: 2 * 2px 20 * 2px 2 * 2px 15 * 2px;
    &-img {
      width: 19 * 2px;
      height: 19 * 2px;
    }
  }
}
.sign {
  position: relative;
  margin: 0 15 * 2px;
  margin-bottom: 12 * 2px;
  padding: 15 * 2px 10 * 2px;
  border-radius: 12 * 2px;
  background-color: #fff;

  &-content {
    position: relative;
    &-header {
      position: relative;
      padding-bottom: 15 * 2px;
      margin-bottom: 15 * 2px;
      border-bottom: 2px solid rgba(115, 119, 128, 0.15);
      &-text {
        color: #002853;
        font-size: 14 * 2px;
        font-weight: 590;
        text-align: left;
      }
    }
    &-day7 {
      z-index: 9;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      &-item {
        z-index: 9;
        flex-direction: column;
        justify-content: center;
        margin-top: 10 * 2px;
        width: calc(25% - 13px);
        background-color: #f2f8ff;
        border-radius: 12 * 2px;
        overflow: hidden;
        // box-sizing: content-box;
        &-top {
          position: absolute;
          top: 0px;
          left: 0;
          width: 100%;
          height: 100%;
        }
        &-title {
          width: 44 * 2px;
          height: 18 * 2px;
          position: relative;
          color: #7fa2d7;
          text-align: center;
          font-size: 11 * 2px;
          font-weight: 590;
          line-height: 18 * 2px;
          &-activate {
            color: #fff;
          }
          &-disabled {
            color: #7fa2d7;
          }
        }
        &-icon {
          width: 100%;
          margin-top: 4 * 2px;
          height: 40 * 2px;
        }
        &-footertext {
          position: relative;
          text-align: center;
          color: #7fa2d7;
          font-size: 13 * 2px;
          font-weight: 400;
          line-height: 40 * 2px;
          height: 33 * 2px;
          width: 100%;

          &-activate {
            color: #fff;
          }
          &-disabled {
            color: #7fa2d7;
          }
        }
        &-footer {
          position: absolute;
          bottom: 0px;
          left: 0;
          width: 100%;
          // scale: 1.015;
        }
      }
      &-end {
        position: relative;
        z-index: 9;
        flex-direction: column;
        justify-content: center;

        margin-top: 10 * 2px;
        width: calc(50% - 12px);
        background-color: #f2f8ff;
        border-radius: 12 * 2px;
        &-top {
          position: absolute;
          top: 0px;
          left: 0;
          width: 100%;
          height: 100%;
        }
        &-title {
          z-index: 9;
          min-width: 44 * 2px;
          height: 18 * 2px;
          position: relative;
          color: #7fa2d7;
          text-align: center;
          font-size: 11 * 2px;
          font-weight: 590;
          line-height: 18 * 2px;
          &-activate {
            color: #fff;
          }
          &-disabled {
            color: #7fa2d7;
          }
        }
        &-iconbg {
          position: absolute;
          top: 40px;
          height: 42 * 2px;
        }
        &-icon {
          position: relative;
          top: -14 * 2px;
          height: 127px;
        }
        &-footertext {
          z-index: 9;
          margin-top: 40 * 2px;
          position: relative;
          text-align: center;
          color: #7fa2d7;
          font-size: 13 * 2px;
          font-weight: 400;
          line-height: 40 * 2px;
          height: 33 * 2px;
          width: 100%;
          overflow: hidden;
          &-activate {
            color: #fff;
          }
          &-disabled {
            color: #7fa2d7;
          }
        }
        &-footer {
          position: absolute;
          bottom: 0px;
          left: 0;
          width: 100%;
        }
      }
    }
    &-activate {
      border: 3px solid #007bff !important;
      background-color: #ebf5ff !important;
      color: #fff !important;
    }
  }
}

.task {
  margin: 0 15 * 2px;
  padding: 15 * 2px 10 * 2px;
  border-radius: 12 * 2px;
  background-color: #fff;
  overflow: hidden;
  &-header {
    padding-bottom: 12 * 2px;
    margin-bottom: 12 * 2px;
    border-bottom: 2px solid rgba(115, 119, 128, 0.15);
    &-text {
      font-size: 14 * 2px;
      color: #002853;
      font-weight: 510;
    }
  }
  &-tab {
    justify-content: center;
    width: 100 * 2px;
    height: 30 * 2px;
    background-color: #f4f5f7;
    color: #999da7;
    text-align: center;
    font-size: 15 * 2px;
    line-height: 30 * 2px;
    letter-spacing: -0.4px;
    border-radius: 100px;
    &-activity {
      color: #0989ff !important;
      background-color: #e1f0ff;
      font-weight: 590;
      border: none;
    }

    &-suo {
      width: 14 * 2px;
      height: 14 * 2px;
      margin-left: 8 * 2px;
    }
    &-point {
      position: absolute;
      top: 2 * 2px;
      right: -7px;
      width: 6 * 2px;
      height: 6 * 2px;
      background-color: #ff4040;
      border: 2px solid #fff;
      border-radius: 100px;
    }
  }
  &-content {
    background-color: #fff;
  }
  &-cell {
    // margin: 0 10 * 2px;
    padding-top: 15 * 2px;
    justify-content: space-between;
    &-left {
      flex: 1;
      &-img {
        width: 38 * 2px;
        height: 38 * 2px;
        border-radius: 19 * 2px;
        margin-right: 10 * 2px;
      }
      &-title {
        color: #141924;
        font-size: 13 * 2px;
        margin-bottom: 8 * 2px;
        &-bdc {
          color: #007bff;
          font-size: 13 * 2px;
          font-weight: 590;
        }
      }
      &-bdc {
        display: inline-flex;
        padding: 2 * 2px 6 * 2px;
        border-radius: 100px;
        color: #007bff;
        font-size: 11 * 2px;
        font-weight: 590;
        background-color: #f0f3fa;
      }
      &-icon {
        width: 14 * 2px;
        height: 14 * 2px;
        margin-right: 2 * 2px;
      }
    }
    &-right {
      min-width: 105 * 2px;
      &-btn {
        height: 28 * 2px;
        line-height: 28 * 2px;
        text-align: center;
        border-radius: 8px;
        border: 3px solid #007bff;
        padding: 0 15 * 2px;
        color: #007bff;
        font-size: 13 * 2px;
        font-weight: 590;
      }
      &-activity {
        color: #fff !important;
        border: none !important;
        background: linear-gradient(90deg, #007bff 0.34%, #00b2ff 100%);
        box-shadow: 0px 2px 6px 0px #b8dbff;
      }
      &-done {
        color: #fff !important;
        background-color: #a0ceff;
        font-weight: 590;
        border: none;
      }
      &-expired {
        color: #70a4dc !important;
        background-color: #e2f0ff;
        font-weight: 590;
        border: none;
      }
    }
    &-bottom {
      padding-left: 38 * 2px;
      margin-left: 10 * 2px;
      padding-top: 8 * 2px;
      padding-bottom: 15 * 2px;
      font-size: 11 * 2px;
      color: #999da7;
    }
  }
}

.reward {
  border-radius: 12 * 2px;
  min-height: 287 * 2px;
  width: 295 * 2px;
  background: linear-gradient(180deg, #e2f0ff 0%, #fff 100%);
  position: relative;
  justify-content: center;
  flex-direction: column;
  &-titlebg {
    width: 280 * 2px;
    height: 30 * 2px;
    line-height: 29 * 2px;
    margin: 15 * 2px 10 * 2px;
    color: #fcffc7;
    text-align: center;
    font-size: 17 * 2px;
    font-weight: 590;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("/image/airdrop/popup-title-blue-icon.svg") !important;
  }
  &-imgview {
    position: relative;
    &-gh {
      position: absolute;
      top: 0;
      left: 50%;
      height: 96 * 2px;
      transform: translate(-50%, -10%);
      @keyframes rotate {
        0% {
          transform: translate(-50%, -10%) rotateZ(0);
        }
        100% {
          transform: translate(-50%, -10%) rotateZ(720deg);
        }
      }
      animation: rotate 5s infinite linear;
    }
    &-img {
      position: relative;
      z-index: 2;
      height: 70 * 2px;
    }
  }

  &-bdc {
    position: relative;
    z-index: 2;
    padding: 4 * 2px 10 * 2px;
    border-radius: 100px;
    border: 2px solid #fff;
    background: #d8ebff;
    color: #007bff;
    font-size: 17 * 2px;
    font-weight: 590;
    margin-bottom: 15 * 2px;
  }
  &-desc {
    margin: 0 15 * 2px;
    color: #999da7;
    font-size: 13 * 2px;
    margin-bottom: 15 * 2px;
    word-break: break-word;
  }
  &-btn {
    width: 100%;
    height: 58 * 2px;
    border-top: 2px solid rgba(0, 0, 0, 10%);
    justify-content: center;
    &-text {
      width: 265 * 2px;
      height: 36 * 2px;
      line-height: 36 * 2px;
      text-align: center;
      font-size: 15 * 2px;
      color: #fff;
      font-weight: 590;
      background-color: #007bff;
      border-radius: 6 * 2px;
    }
  }
  &-close {
    position: absolute;
    bottom: -45 * 2px;
    width: 30 * 2px;
    height: 30 * 2px;
  }
}
.arousalUser {
  position: relative;
  background-color: #f0f3fa;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  padding-bottom: 33 * 2px;
  .content {
    background: linear-gradient(
      183deg,
      #007bff 4.35%,
      rgba(255, 236, 249, 0) 93.87%
    );
    background-size: 100vw 291 * 2px;
    background-repeat: no-repeat;
    &-bg {
      &-left {
        position: absolute;
        top: -60px;
        left: 0px;
        height: 180 * 2px;
      }
      &-right {
        position: absolute;
        top: -136px;
        right: 0px;
        height: 247 * 2px;
      }
    }
  }
}
</style>
<style lang="scss">
.task {
  .van-tab--grow {
    padding-right: 12 * 2px !important;
    padding-left: 0 !important;
  }
  .van-tabs__nav--line {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
</style>
